<template>
  <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit"
    @cancel="show = false" unmountOnClose>
    <template #title>
      {{$t('components.create.60zemc8cafg0')}}
    </template>
    <div class="table-info">
      <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
        <a-form-item field="name" :label="$t('components.create.60zejf10xg00')">
          <a-input v-model="form.data.name" />
        </a-form-item>
        <a-form-item field="remark" :label="$t('components.create.60zen04t62g0')">
          <a-input v-model="form.data.remark" />
        </a-form-item>
        <a-form-item field="authIds" :label="$t('components.create.60zejf10yz00')" hide-label
          :rules="[{ required: true, message: $t('components.create.60zejf10zlw0'), type: 'array' }]">
          <div style="width: 100%;">
            <div style="display: flex;align-items: center;">
              <a-checkbox @click="toggleChecked" :model-value="form.checked?.length == props.allAuths?.length"
                :indeterminate="!!form.checked?.length && (form.checked?.length != props.allAuths?.length)">
                {{$t('components.create.60zejf10yz00')}}
              </a-checkbox>
            </div>
            <div class="auth">
              <a-tree @change="validateField('authIds')" :checkable="true" checked-strategy="all" :data="auths"
                :default-expand-all="false" v-model:checked-keys="form.checked"
                v-model:half-checked-keys="form.halfChecked" :fieldNames="{
                  key: 'id',
                  title: 'name',
                  children: 'children'
                }" />
            </div>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apiRoleCreate } from '@/api/setting'
//接收权限列表
interface propsType {
  auths: any;
  allAuths: any;
}
const props = defineProps<propsType>()
const detail: any = defineModel('data', { default: {} })
const show = defineModel('show', { default: false })
const formRef = ref()
const emit = defineEmits(['refresh'])
//权限列表选择
const toggleChecked = () => {
  form.checked = form.checked?.length == props.allAuths?.length ? [] : cloneDeep(props.allAuths)
  form.halfChecked = []
}
const validateField = (field: string) => {
  formRef.value?.validateField(field)
}
const form = reactive({
  data: {
    name: t('components.create.60zejf110880'),
    remark: '',
    authIds: [],
  },
  checked: [],
  halfChecked: [],
  loading: false,
})
const submit = async () => {
  const validate= await formRef.value?.validate()
  if(validate) return;
  form.loading = true
  const { code } = await apiRoleCreate({
    ...form.data,
  })
  form.loading = false
  if (code != 200) return;
  emit('refresh')
  formRef.value?.resetFields()
  show.value = false
}
useWatchEffect(() => {
  form.data.authIds = [...form.checked, ...form.halfChecked]
})
useWatch(show, (val: any) => {
  if (val) {
    form.data = {
      ...detail.value,
    }
    // getAuthsData()
    // getConfig()
  } else {
    formRef.value?.resetFields()
  }
})
</script>

<style scoped>
.auth {
  width: 100%;
  overflow: auto;
  /* height: 60vh; */
  border: 1px solid var(--main-border-color);
  background-color: var(--color-fill-2);
  margin-top: 10px;
  padding: 5px;
  border-radius: 2px;
}

:deep(.arco-upload-drag) {
  padding: 15px 0 !important;

  .arco-icon-plus {
    margin-bottom: 12px;
  }
}
</style>